<div class="ai-container">
    <div class="ai-header">
        <div class="search-bar">
            <input type="text" placeholder="搜索AI应用..." class="search-input">
            <button class="search-button"><i class="fas fa-search"></i></button>
        </div>
        <div class="action-buttons">
            <button class="btn btn-primary" id="createNewAppBtn"><i class="fas fa-plus"></i> 新建AI应用</button>
            <button class="btn btn-secondary"><i class="fas fa-sliders-h"></i> 高级筛选</button>
        </div>
    </div>

    <div class="ai-grid">
        <!-- AI应用分类筛选 -->
        <div class="category-filter">
            <div class="filter-item active">全部</div>
            <div class="filter-item">公文处理</div>
            <div class="filter-item">智能问答</div>
            <div class="filter-item">数据分析</div>
            <div class="filter-item">文本生成</div>
            <div class="filter-item">其他</div>
        </div>

        <!-- 九宫格AI应用展示 -->
        <div class="grid-container">
            <!-- AI应用卡片 1 -->
            <div class="ai-card">
                <div class="card-icon" style="background-color: #e0f7fa;">
                    <i class="fas fa-file-contract" style="color: #00acc1;"></i>
                </div>
                <h3>公文写作</h3>
                <p class="card-desc">根据模板和关键词自动生成公文初稿</p>
                <div class="card-status">
                    <span class="status-badge active">运行中</span>
                    <span class="usage">调用量: 1,042次/月</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline"><i class="fas fa-play"></i> 使用</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-chart-line"></i> 统计</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 设置</button>
                </div>
            </div>

            <!-- AI应用卡片 2 -->
            <div class="ai-card">
                <div class="card-icon" style="background-color: #e8f5e9;">
                    <i class="fas fa-robot" style="color: #388e3c;"></i>
                </div>
                <h3>政策问答助手</h3>
                <p class="card-desc">基于政策法规库的智能问答系统</p>
                <div class="card-status">
                    <span class="status-badge active">运行中</span>
                    <span class="usage">调用量: 2,876次/月</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline"><i class="fas fa-play"></i> 使用</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-chart-line"></i> 统计</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 设置</button>
                </div>
            </div>

            <!-- AI应用卡片 3 -->
            <div class="ai-card">
                <div class="card-icon" style="background-color: #fff8e1;">
                    <i class="fas fa-chart-pie" style="color: #ffa000;"></i>
                </div>
                <h3>精文减会数据分析</h3>
                <p class="card-desc">自动分析统计报表并生成可视化图表</p>
                <div class="card-status">
                    <span class="status-badge warning">部分受限</span>
                    <span class="usage">调用量: 589次/月</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline"><i class="fas fa-play"></i> 使用</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-chart-line"></i> 统计</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 设置</button>
                </div>
            </div>

            <!-- AI应用卡片 4 -->
            <div class="ai-card">
                <div class="card-icon" style="background-color: #f3e5f5;">
                    <i class="fas fa-comment-dots" style="color: #8e24aa;"></i>
                </div>
                <h3>会议纪要生成</h3>
                <p class="card-desc">根据会议录音自动生成结构化会议纪要</p>
                <div class="card-status">
                    <span class="status-badge active">运行中</span>
                    <span class="usage">调用量: 723次/月</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline"><i class="fas fa-play"></i> 使用</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-chart-line"></i> 统计</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 设置</button>
                </div>
            </div>

            <!-- AI应用卡片 5 -->
            <div class="ai-card">
                <div class="card-icon" style="background-color: #e3f2fd;">
                    <i class="fas fa-file-alt" style="color: #1976d2;"></i>
                </div>
                <h3>公文智能校对</h3>
                <p class="card-desc">自动检查公文格式、用语规范及错别字</p>
                <div class="card-status">
                    <span class="status-badge active">运行中</span>
                    <span class="usage">调用量: 1,245次/月</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline"><i class="fas fa-play"></i> 使用</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-chart-line"></i> 统计</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 设置</button>
                </div>
            </div>

            <!-- AI应用卡片 6 -->
            <div class="ai-card">
                <div class="card-icon" style="background-color: #ffebee;">
                    <i class="fas fa-language" style="color: #d32f2f;"></i>
                </div>
                <h3>多语言翻译</h3>
                <p class="card-desc">政府公文专业术语多语言互译</p>
                <div class="card-status">
                    <span class="status-badge error">需授权</span>
                    <span class="usage">调用量: 312次/月</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline"><i class="fas fa-play"></i> 使用</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-chart-line"></i> 统计</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 设置</button>
                </div>
            </div>

            <!-- AI应用卡片 7 -->
            <div class="ai-card">
                <div class="card-icon" style="background-color: #e8eaf6;">
                    <i class="fas fa-search" style="color: #3949ab;"></i>
                </div>
                <h3>智能客服</h3>
                <p class="card-desc">跨知识库的语义化智能检索</p>
                <div class="card-status">
                    <span class="status-badge active">运行中</span>
                    <span class="usage">调用量: 3,451次/月</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline"><i class="fas fa-play"></i> 使用</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-chart-line"></i> 统计</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 设置</button>
                </div>
            </div>

            <!-- AI应用卡片 8 -->
            <div class="ai-card">
                <div class="card-icon" style="background-color: #f1f8e9;">
                    <i class="fas fa-project-diagram" style="color: #7cb342;"></i>
                </div>
                <h3>合同审批助手</h3>
                <p class="card-desc">行政审批流程智能自动化处理</p>
                <div class="card-status">
                    <span class="status-badge warning">测试中</span>
                    <span class="usage">调用量: 187次/月</span>
                </div>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline"><i class="fas fa-play"></i> 使用</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-chart-line"></i> 统计</button>
                    <button class="btn btn-sm btn-outline"><i class="fas fa-cog"></i> 设置</button>
                </div>
            </div>

            <!-- AI应用卡片 9 - 添加新应用 -->
           <!-- <div class="ai-card add-new">
                <div class="card-icon" style="background-color: #f5f5f5;">
                    <i class="fas fa-plus" style="color: #757575;"></i>
                </div>
                <h3>新建AI应用</h3>
                <p class="card-desc">接入新的AI能力或创建自定义应用</p>
                <div class="card-actions">
                    <button class="btn btn-primary"><i class="fas fa-plus"></i> 创建</button>
                </div>
            </div>-->
        </div>

        <!-- 分页控件 -->
        <div class="pagination">
            <button class="page-btn disabled"><i class="fas fa-angle-left"></i></button>
            <button class="page-btn active">1</button>
            <button class="page-btn">2</button>
            <button class="page-btn">3</button>
            <span class="page-ellipsis">...</span>
            <button class="page-btn">5</button>
            <button class="page-btn"><i class="fas fa-angle-right"></i></button>
        </div>
    </div>
</div>

<!-- 新建AI应用模态框 -->
<div class="modal-overlay" id="createAppModal" hidden="hidden">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">新建AI应用</h3>
            <button class="modal-close" id="closeModalBtn">&times;</button>
        </div>
        <div class="modal-body">
            <form id="createAppForm">
                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <label class="form-label">应用名称</label>
                            <input type="text" class="form-control" placeholder="请输入应用名称" required>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label class="form-label">应用分类</label>
                            <select class="form-control form-select" required>
                                <option value="">请选择分类</option>
                                <option value="document">公文处理</option>
                                <option value="qa">智能问答</option>
                                <option value="data">数据分析</option>
                                <option value="text">文本生成</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">应用描述</label>
                    <textarea class="form-control form-textarea" placeholder="简要描述应用的功能和用途" required></textarea>
                </div>

                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <label class="form-label">选择图标</label>
                            <div class="icon-preview">
                                <div class="icon-option selected" data-icon="fa-file-contract" style="background-color: #e0f7fa;">
                                    <i class="fas fa-file-contract" style="color: #00acc1;"></i>
                                </div>
                                <div class="icon-option" data-icon="fa-robot" style="background-color: #e8f5e9;">
                                    <i class="fas fa-robot" style="color: #388e3c;"></i>
                                </div>
                                <div class="icon-option" data-icon="fa-chart-pie" style="background-color: #fff8e1;">
                                    <i class="fas fa-chart-pie" style="color: #ffa000;"></i>
                                </div>
                                <div class="icon-option" data-icon="fa-comment-dots" style="background-color: #f3e5f5;">
                                    <i class="fas fa-comment-dots" style="color: #8e24aa;"></i>
                                </div>
                                <div class="icon-option" data-icon="fa-search" style="background-color: #e8eaf6;">
                                    <i class="fas fa-search" style="color: #3949ab;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label class="form-label">图标颜色</label>
                            <div class="color-preview">
                                <div class="color-option selected" style="background-color: #00acc1;" data-color="#00acc1" data-bg="#e0f7fa"></div>
                                <div class="color-option" style="background-color: #388e3c;" data-color="#388e3c" data-bg="#e8f5e9"></div>
                                <div class="color-option" style="background-color: #ffa000;" data-color="#ffa000" data-bg="#fff8e1"></div>
                                <div class="color-option" style="background-color: #8e24aa;" data-color="#8e24aa" data-bg="#f3e5f5"></div>
                                <div class="color-option" style="background-color: #d32f2f;" data-color="#d32f2f" data-bg="#ffebee"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">API接入方式</label>
                    <div class="checkbox-group">
                        <label class="checkbox-label">
                            <input type="radio" name="apiType" class="checkbox-input" value="rest" checked>
                            REST API
                        </label>
                        <label class="checkbox-label">
                            <input type="radio" name="apiType" class="checkbox-input" value="websocket">
                            WebSocket
                        </label>
                        <label class="checkbox-label">
                            <input type="radio" name="apiType" class="checkbox-input" value="sdk">
                            SDK集成
                        </label>
                        <label class="checkbox-label">
                            <input type="radio" name="apiType" class="checkbox-input" value="custom">
                            自定义接入
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">权限设置</label>
                    <div class="checkbox-group">
                        <label class="checkbox-label">
                            <input type="checkbox" class="checkbox-input" checked>
                            部门内可见
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" class="checkbox-input">
                            全单位可见
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" class="checkbox-input">
                            需要审批
                        </label>
                    </div>
                </div>

                <button type="button" class="advanced-toggle" id="advancedToggleBtn">
                    <i class="fas fa-chevron-down"></i> 高级设置
                </button>

                <div class="advanced-options">
                    <div class="advanced-content" id="advancedContent">
                        <div class="form-group">
                            <label class="form-label">API端点URL</label>
                            <input type="text" class="form-control" placeholder="https://api.example.com/v1/endpoint">
                        </div>

                        <div class="form-group">
                            <label class="form-label">认证方式</label>
                            <select class="form-control form-select">
                                <option value="none">无认证</option>
                                <option value="apiKey">API Key</option>
                                <option value="oauth">OAuth 2.0</option>
                                <option value="jwt">JWT</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">请求频率限制</label>
                            <div class="form-row">
                                <div class="form-col">
                                    <input type="number" class="form-control" placeholder="例如: 100" min="1">
                                    <small class="form-text">请求次数/分钟</small>
                                </div>
                                <div class="form-col">
                                    <input type="number" class="form-control" placeholder="例如: 1000" min="1">
                                    <small class="form-text">请求次数/天</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">日志级别</label>
                            <select class="form-control form-select">
                                <option value="debug">Debug</option>
                                <option value="info" selected>Info</option>
                                <option value="warning">Warning</option>
                                <option value="error">Error</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-footer">
                    <button type="button" class="btn btn-secondary" id="cancelCreateBtn">取消</button>
                    <button type="submit" class="btn btn-primary">创建应用</button>
                </div>
            </form>
        </div>
    </div>
</div>

